<template>
	<view>
		<view class="list">
			<view class="item" v-for="(item, index) in dataList" :key="index" @longpress="longPress(item,index)">
				<view class="cont" @click="selectAddress(item)">
					<view class="base-info">
						<view class="name">{{ item.name }}</view>
						<view class="mobile">{{ item.mobile }}</view>
						<view class="default public-icon" v-if="item.isDefault">默认</view>
						<view class="public-icon" v-if="item.remark">{{ item.remark }}</view>
					</view>
					<view class="address-info">{{ areaFilter(item.area) + '   ' + item.address }}</view>
				</view>
				<view class="iconfont iconfont-e628" @click.stop="addressAddOrUpdate(item)"></view>
			</view>
		</view>
		<view class="fix_bot_main">
			<view class="fixed_bottom_btn">
				<view class="word" :style="{ background: vuex_config.themeColor1 }" @click="addressAddOrUpdate()">新建地址
				</view>
			</view>
		</view>
		<sww-load-more :params="dataListParams" @load="loadMore"></sww-load-more>

		<u-popup v-model="showPopup" mode="bottom">
			<view class="option_popup">
				<view class="op-btn op-right" @click="delet">删除地址</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		pagingMixin
	} from '@/mixins/pagingMixin.js';
	export default {
		mixins: [pagingMixin],
		data() {
			return {
				getBack: false, // 是否需要选择并返回上一页
				showPopup: false,
				currentItem: {}
			};
		},
		computed: {
			areaFilter(area) {
				return area => {
					let arr = area.split(',');
					let len = arr.length;
					arr.splice(len - 1, 1);
					return arr.join('');
				};
			}
		},
		onLoad(options) {
			if (options && options.getBack) {
				this.getBack = true;
			}
		},
		onShow() {
			this.initPage();
		},
		onReachBottom: function() {
			this._load_data();
		},
		methods: {
			initPage() {
				this._init_data('GetUsersOrderAddress');
			},
			loadMore() {
				this._load_data();
			},
			selectAddress(item) {
				if (this.getBack) {
					let arr = item.area.split(',');
					let len = arr.length;
					arr.splice(len - 1, 1);
					let str = arr.join('');
					this.$u.vuex('vuex_address', {
						name: item.name,
						mobile: item.mobile,
						address: str + ' ' + item.address
					});
					uni.navigateBack({
						delta: 1
					});
				}
			},
			// 新增、修改地址
			addressAddOrUpdate(item) {
				let url = '/package/user/address/add';
				if (item) {
					url = url + `?item=${JSON.stringify(item)}`;
				}
				this.$linkTo(url);
			},
			// 长按显示弹出层
			longPress(item, index) {
				this.currentItem = {
					...item,
					index: index
				};
				this.showPopup = true;
			},
			delet() {
				this.$loading()
				this.$DeleteManagerData(36, this.currentItem.pk_id).then(() => {
					this.$hide()
					this.$toast('删除成功')
					this.showPopup = false
					this.dataList.splice(this.currentItem.index, 1)
				})
			}
		}
	};
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	.list {
		padding: 20rpx;

		.item {
			border-bottom: 1rpx solid #f5f5f5;
			width: 100%;
			position: relative;
			padding: 20rpx 0;
			display: flex;
			align-items: center;

			.cont {
				flex: 1;
				overflow: hidden;
			}

			.base-info {
				width: 100%;
				display: flex;
				height: 70rpx;
				align-items: center;
			}

			.base-info .name {
				width: 210rpx;
				font-weight: bold;
				font-size: 32rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.base-info .mobile {
				padding: 0 20rpx;
				font-weight: 500;
				font-size: 35rpx;
				line-height: 50rpx;
			}

			// .base-info .default {
			// 	background: #e64340;
			// 	margin-right: 20rpx;
			// }
			.address-info {
				width: 85%;
				font-size: 26rpx;
				line-height: 36rpx;
			}

			.icon {
				margin-left: 3px;
				font-size: 24px;
			}
		}
	}

	.option_popup {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.option_popup .op-btn {
		border: 1rpx solid #e64340;
		border-radius: 30rpx;
		font-size: 28rpx;
		color: #e64340;
		width: 40%;
		text-align: center;
		padding: 10rpx 0;
	}

	.option_popup .op-right {
		background: #e64340;
		color: #ffffff;
	}
</style>
